<template>
  <div class="container">
    <LeftSide />
    <RightSide />
  </div>
  <div>
    <EditorHeader :title="title" />
    <Main />
  </div>
</template>

<script setup lang="ts">
import { computed, provide, ref } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import RightSide from './RightSide/index.vue';
import LeftSide from './LeftSide/index.vue';
import EditorHeader from './Header/index.vue';
import Main from './Main/index.vue';
import { useEditorStore } from '@/stores/useEditor';
import { restoreComponentStatus, changeEditorIsShowStatus } from '@/utils';
import { getSurveyById } from '@/db/operation';
import { IsOptionsStatus, isPicLink, IsTextInputStatus, IsTypeStatus } from '@/types';
import type { PicLink } from '@/types';

const route = useRoute();
const store = useEditorStore();
const title = ref('');
const currentCom = computed(() => store.coms[store.currentComponentIndex]);
if (route.params.id) {
  getSurveyById(+route.params.id).then((res) => {
    if (res) {
      restoreComponentStatus(res.coms);
      store.setStore(res);
      title.value = res.title;
    }
  });
} else {
  store.resetComs();
}

const updateStatus = (configKey: string, payload?: number | string | boolean | object) => {
  switch (configKey) {
    case 'type': {
      if (typeof payload === 'number' && IsTypeStatus(currentCom.value.status)) {
        changeEditorIsShowStatus(currentCom.value.status, payload);
        store.setOption(currentCom.value.status[configKey], payload);
      } else {
        console.error('Invalid payload type for "type". Expected number.');
      }
      break;
    }
    case 'title':
    case 'desc': {
      if (typeof payload === 'string') {
        store.setTextStatus(currentCom.value.status[configKey], payload);
      } else {
        console.error('Invalid payload type for "title" or "desc". Expected string.');
      }
      break;
    }
    case 'options': {
      if (!IsOptionsStatus(currentCom.value.status)) return;
      if (typeof payload === 'number') {
        // 删除选项
        const result = store.removeOption(currentCom.value.status[configKey], payload);
        if (result) ElMessage.success('删除成功');
        else ElMessage.error('至少保留两个选项');
      } else if (typeof payload === 'boolean') {
        // 开关评分提示语
        store.setIsUse(currentCom.value.status[configKey], payload);
      } else if (typeof payload === 'object' && isPicLink(payload)) {
        // 设置图片链接
        store.setPicLinkByIndex(currentCom.value.status[configKey], payload);
      } else if (typeof payload === 'object') {
        // 设置评分组件的提示文字
        store.setRateScoreText(
          currentCom.value.status[configKey],
          payload as { val: string; index: number },
        );
      } else {
        // 新建选项
        store.addOption(currentCom.value.status[configKey]);
      }
      break;
    }
    case 'position': {
      if (typeof payload === 'number') {
        store.setOption(currentCom.value.status[configKey], payload);
      } else {
        console.error('Invalid payload type for "position". Expected number.');
      }
      break;
    }
    case 'titleSize':
    case 'descSize': {
      if (typeof payload === 'number') {
        store.setOption(currentCom.value.status[configKey], payload);
      } else {
        console.error('Invalid payload type for "titleSize" or "descSize". Expected number.');
      }
      break;
    }
    case 'titleWeight':
    case 'descWeight': {
      if (typeof payload === 'number') {
        store.setOption(currentCom.value.status[configKey], payload);
      } else {
        console.error('Invalid payload type for "titleWeight" or "descWeight". Expected number.');
      }
      break;
    }
    case 'titleItalic':
    case 'descItalic': {
      if (typeof payload === 'number') {
        store.setOption(currentCom.value.status[configKey], payload);
      } else {
        console.error('Invalid payload type for "titleItalic" or "descItalic". Expected number.');
      }
      break;
    }
    case 'titleColor':
    case 'descColor': {
      if (typeof payload === 'string') {
        store.setTextStatus(currentCom.value.status[configKey], payload);
      } else {
        console.error('Invalid payload type for "titleColor" or "descColor". Expected string.');
      }
      break;
    }
    case 'maxLength': {
      if (typeof payload === 'string' && IsTextInputStatus(currentCom.value.status)) {
        store.setTextStatus(currentCom.value.status[configKey], payload);
      }
      break;
    }
  }
};
const getPicLink = (picLink: PicLink) => {
  updateStatus('options', picLink);
};
provide('updateStatus', updateStatus);
provide('getPicLink', getPicLink);
</script>

<style lang="scss" scoped>
.container {
  width: calc(100vw - 40px);
  padding: 20px;
  height: calc(100vh - 50px - 30px);
  background: url('@/assets/imgs/editor_background.png');
  position: fixed;
  top: 50px;
}
</style>
